<template>
  <view class="my-remark">
	<uni-forms ref="form" @submit="submit">
		<uni-forms-item label="姓名:" name="username">
			<input  class="input" type="text" placeholder="请输入您的姓名" v-model="applyData.username"
			/>
		</uni-forms-item>
		<uni-forms-item label="电话号码:" name="mobile">
			<input  class="input" type="text"  v-model="applyData.mobile"
					placeholder="请输入您的电话号码"  />
		</uni-forms-item>
		<uni-forms-item label="百度账号:" name="baiduName">
			<input  class="input" type="text" v-model="applyData.baiduName"
					placeholder="请输入您的百度账号"  />
		</uni-forms-item>
		<label class="comment-label">个人描述：</label>
		<textarea  v-model="applyData.description"  class="textarea"  
			placeholder="简单描述一下您的基本情况,将有助于平台管理员对您有基本的了解~ " />
		<view class="footer">
			<button  @click="submitForm">修改报名信息</button>
			<button  @click="cancleApply">取消报名</button>
		</view>
	</uni-forms>
  </view>
</template>

<script>
import {uniForms, uniFormsItem} from '@dcloudio/uni-ui'
import {updateActivityApply, deleteActivityApply} from '@/api/activity.js'
import {mapState} from 'vuex'
export default {
  name: 'create-remark',
  components: { uniForms, uniFormsItem },
  data() {
  	return {
		applyData: {},
		originData: {},
  	}
  },
  onLoad(option) {
	const eventChannel = this.getOpenerEventChannel()
	let that = this
	eventChannel.on('acceptDataFromOpenerPage', function(item) {
	    console.log(item)
		that.applyData = JSON.parse(JSON.stringify(item))
		that.originData = item
	})
  },
  computed:{
		...mapState(['userInfo', 'baseTarget']),
  },
  methods: {
	cancleApply(){
		uni.showModal({
		    title: '删除报名',
		    content: '删除后该报名信息将不会被保存，确认删除吗？',
		    success: (res) => {
		        if (res.confirm) {
		            console.log('用户点击确定');
					this.deleteApply()
		        }
		    }
		});
	},
	deleteApply(){
		deleteActivityApply({applyId: this.applyData.id}).then(res=>{
			if(res.code === 200){
				
				uni.showToast({title: '删除成功！'})
				uni.switchTab({
					url: '/pages/mine/index'
				})
				// console.log(getCurrentPages().pop())
				// console.log(getCurrentPages().pop())
				// uni.redirectTo({
				// 	url: '/pages/mine/application/activity-apply',
				// 	success:(res)=>{
				// 		const page = getCurrentPages().pop();
				// 		if(page == undefined || page == null) return;
				// 		page.onLoad()
				// 	}
				// })
			}else{
				uni.showToast({title: '删除失败！', icon: 'none'})
			}
		})
	},
	// 提交表单
	submit(e) {
		const {username, baiduName, description, mobile, id: applyId} = this.applyData
		if(!username){
			uni.showToast({title:'请输入您的姓名~', icon: 'none'}); return;
		}
		if(!baiduName){
			uni.showToast({title:'请输入您的百度账号~', icon: 'none'}); return;
		}
		if(!mobile){
			uni.showToast({title:'请输入您的电话号码~', icon: 'none'}); return;
		}
		if(!description){
			uni.showToast({title:'请输入个人描述~', icon: 'none'}); return;
		}
		let pattern = /^((1[0-9]{10})|(([0-9]{3,4}-)?[0-9]{7,8}))$/
		if(!pattern.test(mobile)){
			uni.showToast({title:'请检查您的电话号码', icon: 'none'}); return;
		}
		const formData = {
			username, baiduName, description, mobile, applyId
		}
		this.updateApply(formData)
	},
	updateApply(formData){
		updateActivityApply(formData).then(res=>{
			if(res.code === 200){
				Object.assign(this.originData, this.applyData)
				uni.showToast({title: '修改成功！'})
				uni.navigateBack({
					animationType: 'pop-out',
					animationDuration: 200
				})
			}else{
				uni.showToast({title: '修改失败！', icon: 'none'})
			}
		}).catch(err=>{uni.showToast({title:'我们的网络出现了一点错误，请稍候再试~', icon: 'none'})})
	},
	submitForm(form) {
		// 手动提交表单
		this.$refs.form.submit()
	},
  }
}
</script>

<style lang='scss'>

/* 头条、百度小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
 page {
   background-color: #f5f5f5;
   padding: 10rpx;
 }
 .footer{
	 display: flex;
	 justify-content: space-around;
	 button {
	    margin-top: 10rpx;
		background-color: $theme-color;
		color: #ffffff;
		&::after{
		  border: none;
		}
	   /* background-color: #fff;
	    color: $theme-color;
	    &::after{
	      border: $theme-color 1px solid;
	    } */
	  }
 }

  .comment-label{
		width: 210rpx;
		word-wrap: break-word;
		word-break: break-all;
		text-indent: 20rpx;
  }
  

  /* 表单 */
  .input {
  	height: 60rpx;
  	padding: 15rpx 25rpx;
  	line-height: 50rpx;
  	font-size: 28rpx;
  	background: #FFF;
  	flex: 1;
  }
  .schoolInput{
		width: 550rpx;
		height: 60rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #FFF;
		flex: 1;
  }
  .textarea {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 15rpx 25rpx;
		font-size: 28rpx;
		background: #FFF;
		height: 150rpx;
		width: 93%;
  }
</style>
